<script module lang="ts">
    import { defineMeta } from "@storybook/addon-svelte-csf";
    import Pagination from "./Pagination.svelte";
    import { fn } from "storybook/test";
    import Icon from "@iconify/svelte";

    const { Story } = defineMeta({
        title: "Components/Navigation/Pagination",
        component: Pagination,
        tags: ["autodocs"],
        argTypes: {
            current: {
                description: "双向绑定属性",
            },
            pageSize: {
                table: {
                    defaultValue: { summary: "10" },
                },
            },
            pages: {
                table: {
                    defaultValue: {
                        summary: `[{ value: 10, label: "10 条/页" },
                        { value: 20, label: "20 条/页" },
                        { value: 50, label: "50 条/页" },
                        { value: 100, label: "100 条/页" }]`,
                    },
                },
            },
        },
        args: {},
    });
    const store = $state({
        current: 1,
        pageSize: 10,
    });
</script>

<Story name="Default">
    {#snippet template(args)}
        <div style="height: 200px;">
            <Pagination
                bind:current={store.current}
                pageSize={store.pageSize}
                total={1000}
                onchange={(page: number) => {
                    console.log(page);
                }}
                onchangepagesize={(size: number) => {
                    store.pageSize = size;
                }}
            />
        </div>
    {/snippet}
</Story>

<Story name="Size" args={{ size: "small" }}>
    {#snippet template(args)}
        <div style="height: 200px;">
            <Pagination
                {...args}
                bind:current={store.current}
                pageSize={store.pageSize}
                total={1000}
                onchange={(page: number) => {
                    console.log(page);
                }}
                onchangepagesize={(size: number) => {
                    store.pageSize = size;
                }}
            />
        </div>
    {/snippet}
</Story>

<Story name="Mini" args={{ mini: true }}>
    {#snippet template(args)}
        <Pagination
            {...args}
            bind:current={store.current}
            pageSize={store.pageSize}
            total={1000}
            onchange={(page: number) => {
                console.log(page);
            }}
            onchangepagesize={(size: number) => {
                store.pageSize = size;
            }}
        />
    {/snippet}
</Story>

<Story name="OnlyNums" args={{ showTotal: false, showPage: false, showJumper: false }}>
    {#snippet template(args)}
        <Pagination
            {...args}
            bind:current={store.current}
            pageSize={store.pageSize}
            total={1000}
            onchange={(page: number) => {
                console.log(page);
            }}
            onchangepagesize={(size: number) => {
                store.pageSize = size;
            }}
        />
    {/snippet}
</Story>

<Story name="OnlySwitch" args={{ showTotal: false, showPage: false, showJumper: false, showNums: false }}>
    {#snippet template(args)}
        <Pagination
            {...args}
            bind:current={store.current}
            pageSize={store.pageSize}
            total={1000}
            onchange={(page: number) => {
                console.log(page);
            }}
            onchangepagesize={(size: number) => {
                store.pageSize = size;
            }}
        />
    {/snippet}
</Story>

<Story name="Circle" args={{ shape: "circle" }}>
    {#snippet template(args)}
        <div style="height: 200px;">
            <Pagination
                {...args}
                bind:current={store.current}
                pageSize={store.pageSize}
                total={1000}
                onchange={(page: number) => {
                    console.log(page);
                }}
                onchangepagesize={(size: number) => {
                    store.pageSize = size;
                }}
            />
        </div>
    {/snippet}
</Story>

<Story
    name="Pages"
    args={{
        pages: [
            { value: 10, label: "10条/页" },
            { value: 40, label: "40条/页" },
            { value: 100, label: "100条/页" },
        ],
    }}
>
    {#snippet template(args)}
        <div style="height: 200px;">
            <Pagination
                {...args}
                bind:current={store.current}
                pageSize={store.pageSize}
                total={1000}
                onchange={(page: number) => {
                    console.log(page);
                }}
                onchangepagesize={(size: number) => {
                    store.pageSize = size;
                }}
            />
        </div>
    {/snippet}
</Story>
